<template>
  <div>
    <div class="page_title">行业协会管理{{ }}</div>
    <FormTable :name="table.name" :tableButton="table.button" :formRules="formRules" :tableData="table.tableData"
      :columns="table.columns" :total="total" :currentPage="listQuery.pageNo" :pageSize="listQuery.pageSize"
      @changeTableData="changeTableData" @tableButtonClick="addList">
      <template #operator="{ slotProps }" class="table_button_list">
        <span class="table_button" @click="setData('edit', slotProps)">编辑</span>
      </template>
    </FormTable>
    <el-dialog v-model="dialogVisible" width="360px" title="添加名单" :before-close="handleClose" class="mydialog">
      <el-form :model="formInline" label-width="100px" >
        <el-form-item label="单位名称">
          <el-input v-model="formInline.user" placeholder="单位名称" clearable />
        </el-form-item>
        <el-form-item label="统一信用代码">
          <el-input v-model="formInline.user" placeholder="统一信用代码" clearable />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="formInline.user" placeholder="地址" clearable />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="formInline.user" placeholder="联系方式" clearable />
        </el-form-item>
        <el-form-item label="职务职称">
          <el-input v-model="formInline.user" placeholder="职务职称" clearable />
        </el-form-item>
        <el-form-item label="业务领域">
          <el-input v-model="formInline.user" placeholder="业务领域" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script name="list-two" setup>
import FormTable from "@/components/FormTable/index.vue";
const dialogVisible = ref(false)
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})
let listQuery = ref({
  pageNo: 1,
  pageSize: 10,
});
let total = ref(0);
const table = reactive({
  tableData: [{ id: 1 }, { id: 2 }],
  name: '行业协会名单',
  button: '添加',
  columns: [
  {
      label: "序号",
      type: "index",
      width: '70px'
    },
    {
      label: "单位名称",
      field: "name",
    },
    {
      label: "统一信用代码",
      field: "email",
    },
    {
      label: "地址",
      field: "email",
    },
    {
      label: "联系人",
      field: "email",
    },
    {
      label: "联系电话",
      field: "email",
    },
    {
      label: "监管风险等级",
      field: "email",
    },
    {
      label: "所属领域",
      field: "email",
    },
    {
      prop: 'operator',
      label: "操作",
      field: "email",
    },
  ],
  totalRecordCount: 10,
  sortable: {},
});
const formRules = ref([
  {
    type: "input",
    field: "username",
    title: "名称",
    value: "",
  },
  {
    type: "input",
    field: "password",
    props: {
      type: "password",
    },
    title: "统一信用代码",
    value: "",
  },
  {
    type: "input",
    field: "username12",
    title: "地址",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "联系人",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "联系电话",
    value: "",
  },
  {
    type: "select",
    field: "username",
    title: "监管风险等级",
    value: "",
  },
  {
    type: "select",
    field: "username",
    title: "所属领域",
    value: "",
  }
]);
const addList = () => {
  dialogVisible.value = true
}
</script>
<style lang="scss" scoped>
.mydialog {
  ::v-deep .el-form-item__label {
    width: 6rem;
    justify-content: flex-start;
  }
}
</style>
